<template>
  <div class="home-container">
    <!--    账号管理内容-->
    <div class="top-container">
      <el-button type="primary" @click="handleAdd">添加</el-button>
    </div>
    <!--    table组件-->
    <el-table :data="accountData" v-loading="accountLoading" border style="width: 100%">
      <el-table-column prop="username" label="项目名称" width="180" />
      <el-table-column prop="" label="项目类型" width="180" />
      <el-table-column prop="remark" label="计算规则" width="180"/>
      <el-table-column prop="" label="涉及金额" />
      <el-table-column prop="" label="状态" />
      <el-table-column prop="" label="岗位等级"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button link type="primary" :icon="Edit" @click="handleUpdate(scope)">修改</el-button>
          <el-button link type="primary" :icon="Delete" @click="handleDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    添加账号对话框-->
    <el-dialog
        v-model="addDialogVisible"
        title="添加账号"
        width="500"
        align-center
    >
      <el-form
          style="max-width: 500px"
          :model="accountForm"
          :rules="rules"
          label-width="auto"
          ref="formRef"
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="accountForm.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="accountForm.password" />
        </el-form-item>
        <el-form-item class="button-content">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onAddSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--    编辑对话框-->
    <el-dialog
        v-model="editDialogVisible"
        title="编辑账号"
        width="500"
        align-center
    >
      <el-form
          style="max-width: 500px"
          :model="editForm"
          label-width="auto"
          ref="editFormRef"
          :rules="rules"
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="editForm.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="editForm.password" />
        </el-form-item>
        <!--        <el-form-item label="备注">-->
        <!--          <el-input v-model="editForm.remark" />-->
        <!--        </el-form-item>-->
        <el-form-item >
          <div class="button-content">
            <el-button @click="editDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="onEditSubmit">确定</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--    删除对话框-->
    <el-dialog
        v-model="deleteDialogVisible"
        title="警告"
        width="500"
        align-center
    >
      <span>是否确定删除该账号？</span>
      <template #footer>
        <div>
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleDeleteDialog">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted  } from 'vue';
import { Delete, Edit, View, Hide, } from '@element-plus/icons-vue'
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus';
import { getAccountList, valAccountList, updateAccountList, addAccountList} from '@/api/account'

const accountData = ref(<Array<unknown> | any>([]))
const initialData = ref(<Array<unknown> | any>([]))
const accountForm = reactive(<object | any>({
  username: '',
  password: ''
}))
const editForm = reactive(<object | any>({
  username: '',
  password: ''
}))
const deleteDialogVisible = ref(<Boolean>(false))
const addDialogVisible = ref(<Boolean>(false))
const editDialogVisible = ref(<Boolean>(false))
const accountLoading = ref(<Boolean>(true))
// 表单引用
const formRef = ref<InstanceType<typeof ElForm>>();
const editFormRef = ref<InstanceType<typeof ElForm>>();


// 表单验证规则
const rules = reactive({
  username: [
    { required: true, message: '账号不能为空', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度应为6到20个字符', trigger: 'blur' }
  ],
  remark: [
    { max: 100, message: '备注长度不能超过100个字符', trigger: 'blur' }
  ]
});

//初始化数据
onMounted(async () => {
  await getData();
});
const getData = async() => {
  // 后端返回的数据
  // const res = await getAccountList();
  accountLoading.value = false;
  // initialData.value = res.data.info_list;
  // accountData.value = initialData.value.map(item => ({ ...item, showPassword: false }));
}

//添加账号
const handleAdd = () => {
  // addDialogVisible.value = true;
}
//修改
const handleUpdate = async (row: object) => {
  // editDialogVisible.value = true;
}
//删除
const handleDelete = (row:object) => {
  deleteDialogVisible.value = true;
}
//修改对话框确定按钮
const onEditSubmit = async () => {
  // editFormRef.value?.validate(async (valid: boolean) => {
  //   if (valid) {
  //     // 这里可以添加修改密码的逻辑
  //     const res = await valAccountList(editForm.username)
  //     const isExist = res.data.is_exist
  //     if (isExist == "true") {
  //       await updateAccountList(editForm)
  //       ElMessage.success('密码修改成功');
  //       getData();
  //     } else {
  //       ElMessage.warning('账号不存在')
  //     }
  //     editDialogVisible.value = false;
  //   } else {
  //     ElMessage.error('表单验证失败，请检查输入');
  //   }
  // })

}
//添加对话框确定按钮
const onAddSubmit = async () => {
  // await addAccountList(accountForm);
  // formRef.value?.validate(async (valid: boolean) => {
  //   if (valid) {
  //     await addAccountList(accountForm);
  //     // 这里可以添加的逻辑
  //     ElMessage.success('添加成功');
  //     addDialogVisible.value = false;
  //     getData();
  //   } else {
  //     ElMessage.error('表单验证失败，请检查输入');
  //   }
  // })
}
//删除对话框确定按钮
const handleDeleteDialog = () => {
  //发请求

  //刷新页面，弹出框关闭

  deleteDialogVisible.value = false;
}
</script>

<style lang="scss" scoped>
.home-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  .top-container {
    margin: 20px 0;
  }
  .password-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .password-cell span {
      flex-grow: 1;
      text-align: left;
    }

    .password-cell .el-button {
      margin-left: 10px;
    }
  }
}
.button-content {
  margin-left: 300px;
}
</style>

